<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fullscreen Fixed toolbars - jQuery Mobile Framework</title>
    <link rel="stylesheet" href="../../css/themes/default/jquery.mobile-1.3.1.min.css">
    <link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
    <link rel="shortcut icon" href="../../favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="../../js/jquery.js"></script>
    <script src="../../_assets/js/index.js"></script>
    <script src="../../js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" class="jqm-demos">

    <div data-role="header" data-position="fixed" data-theme="f" data-fullscreen="true">
        <h1>Fullscreen fixed header</h1>
        <a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
    </div>

    <div data-role="content" class="jqm-content">

        <p style="margin-top:0;text-align:center;"><img src="../../_assets/img/photo-run.jpeg" alt="Photo Run"></p>

        <p class="ui-body">This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in
            special cases where you want the content to fill the whole screen, and you want the header and footer
            toolbars to appear and disappear when the page is clicked responsively &mdash; a common scenario for photo,
            image or video viewers.</p>

        <p class="ui-body">To enable this toolbar feature type, you apply the <code>data-fullscreen="true"</code>
            attribute and the <code>data-position="fixed"</code> attribute to both the header and footer
            <code>div</code> elements, or whichever you want to be full-screen. </p>

        <p class="ui-body">Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content, so
            not all content will be accessible with the toolbars open, just as shown in this demo.</p>

    </div>
    <!-- /content -->

    <div data-role="footer" data-theme="a" data-position="fixed" data-fullscreen="true">
        <h1>Fullscreen Fixed Footer</h1>
    </div>
    <div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal"
         data-theme="c">
        <ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="demos"
            class="jqm-list">
            <li data-role="list-divider">jQuery Mobile Demos</li>
            <li><a href="./">Home</a></li>
            <li><a href="intro/">Introduction</a></li>
            <li><a href="examples/">Demo Showcase</a></li>
            <li><a href="faq/">Questions & Answers</a></li>
            <li><a href="intro/rwd.html">Going Responsive</a></li>
            <li data-role="list-divider">Widget reference</li>
            <li data-section="Widgets"
                data-filtertext="accordions collapsible sets content formatting grouped inset mini"><a
                    href="widgets/accordions/">Accordion</a></li>

            <li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a
                    href="widgets/navigation/" data-ajax="false">AJAX Navigation</a></li>

            <li data-section="Widgets"
                data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a
                    href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>

            <li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled">
                <a href="widgets/buttons/" data-ajax="false">Buttons</a></li>

            <li data-section="Widgets" data-filtertext="checkboxes checkboxradio inputs forms mini disabled"><a
                    href="widgets/checkbox/">Checkboxes</a></li>

            <li data-section="Widgets" data-filtertext="collapsibles content formatting"><a href="widgets/collapsibles/"
                                                                                            data-ajax="false">Collapsibles</a>
            </li>

            <li data-section="Widgets"
                data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a
                    href="widgets/controlgroups/">Controlgroup</a></li>

            <li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>

            <li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a
                    href="widgets/fixed-toolbars/">Fixed toolbars</a></li>

            <li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a
                    href="widgets/sliders/switch.html" data-ajax="false">Flip switch toggle</a></li>

            <li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer
                toolbar</a></li>

            <li data-section="Widgets"
                data-filtertext="forms inputs slider button range toggle switch label disabled accessible fieldcontains elements">
                <a href="widgets/forms/">Form elements</a></li>

            <li data-section="Widgets" data-filtertext="grids columns blocks content formatting rwd responsive"><a
                    href="widgets/grids/">Grids</a></li>

            <li data-section="Widgets" data-filtertext="header toolbars fixed fullscreen sections"><a
                    href="widgets/headers/">Header toolbar</a></li>

            <li data-section="Widgets" data-filtertext="icons buttons disc position"><a href="widgets/icons/">Icons</a>
            </li>

            <li data-section="Widgets" data-filtertext="links navigation ajax prefetch cache"><a href="widgets/links/">Links</a>
            </li>

            <li data-section="Widgets"
                data-filtertext="listviews thumbnails icons nested split button collapsible ul ol"><a
                    href="widgets/listviews/" data-ajax="false">Listviews</a></li>

            <li data-section="Widgets" data-filtertext="ajax loader overlay spinner pages"><a href="widgets/loader/"
                                                                                              data-ajax="false">Loader
                overlay</a></li>

            <li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a
                    href="widgets/navbar/" data-ajax="false">Navbar</a></li>

            <li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a
                    href="widgets/fixed-toolbars/footer-persist-a.html">Navbar, persistent</a></li>

            <li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a
                    href="widgets/pages/">Pages</a></li>

            <li data-section="Widgets"
                data-filtertext="panels sliding nav modal transition display reveal overlay push rwd responsive"><a
                    href="widgets/panels/">Panels <span class="ui-li-count">New</span></a></li>

            <li data-section="Widgets"
                data-filtertext="popup dialog modal transition tooltip lightbox form overlay screen flip pop fade transition">
                <a href="widgets/popup/">Popup</a></li>

            <li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a
                    href="widgets/radiobuttons/">Radio buttons</a></li>

            <li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a
                    href="widgets/selects/">Select</a></li>

            <li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a
                    href="widgets/sliders/" data-ajax="false">Slider, single</a></li>

            <li data-section="Widgets" data-filtertext="slider, dual range sliders rangesliders inputs forms disabled">
                <a href="widgets/sliders/rangeslider.html" data-ajax="false">Slider, dual range <span
                        class="ui-li-count">New</span></a></li>

            <li data-section="Widgets"
                data-filtertext="tables column th td toggle responsive tables rwd hide show tabular"><a
                    href="widgets/table-column-toggle/">Table, column toggle <span class="ui-li-count">New</span></a>
            </li>

            <li data-section="Widgets" data-filtertext="tables reflow th td responsive rwd columns tabular"><a
                    href="widgets/table-reflow/">Table, reflow <span class="ui-li-count">New</span></a></li>

            <li data-section="Widgets"
                data-filtertext="text inputs textarea numeric email tel file date time month clear pattern placeholder forms">
                <a href="widgets/textinputs/">Text inputs & textarea</a></li>

            <li data-section="Widgets"
                data-filtertext="page transitions animated pages ajax navigation flip slide fade pop" data-ajax="false">
                <a href="widgets/transitions/" data-ajax="false">Transitions</a></li>

        </ul>
    </div>
    <!-- /panel -->


</div>
<!-- /page -->

</body>
</html>
